<template>
  <div class="page">
    <el-form ref="form" :model="form">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息表</span>
        </div>
        <div>
          <p class="p_title">本表由申报者在线填写，在线打印自动生成的文档。申报者、监护人须在指定位置签名确认，就读学校须加盖公章确认。申报者将填写完整的表格扫描上传至申报系统，完成提交。自制申报表无效，不接受以电子邮件或传真方式提交的申报表。</p>
        </div>
        <div class="table">
          <h2>第十八届“明天小小科学家”奖励活动</h2>
          <h4>申报表一：基本信息表（必填）</h4>
          <div>
            
          </div>
          <div class="table_grounp">
            <h4>A、申报者信息</h4>
            <table width="100%">
              <tr>
                <td>姓名</td>
                <td>
                  <el-form-item  :show-message="false" prop='studentName'>
                      <el-input disabled v-model="form.studentName"></el-input>
                  </el-form-item>
                  </td>
                <td>出生日期</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='birth'>
                    <el-date-picker
                      v-model="form.birth"
                      type="date"
                      size="mini"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  
                  </td>
                <td>性别</td>
                <td>
                  
                  <el-form-item :required="required" :show-message="false" prop='sex'>
                    <!-- <input type="text" v-model="form.sex"> -->
                    <el-select v-model="form.sex" placeholder="请选择">
                      <el-option
                        v-for="item in option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  
                </td>
                <td>民族</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='nation'>
                    <!-- <input type="text" v-model="form.nation"> -->
                    <el-select class="w160" style="width:120px;" size="mini" placeholder="请选择" v-model.trim="form.nation">
                        <el-option v-for="item in nation_data" :key="item.id" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>身份证号</td>
                <td colspan="3">
                  <el-form-item  :show-message="false" prop='identitycard'>
                    <el-input disabled v-model="form.identitycard"></el-input>
                  </el-form-item>
                </td>
                <td>居住地区</td>
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='liveAddress'>
                    <el-input v-model="form.liveAddress"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>家庭地址</td>
                <td colspan="5">
                  <el-form-item :required="required" :show-message="false" prop='homeAddress'>
                    <el-input v-model="form.homeAddress"></el-input>
                  </el-form-item>
                </td>
                <td>邮编</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='postcode'>
                    <el-input v-model="form.postcode"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>即时通讯</td>
                <td colspan="5">
                  <el-form-item :required="required" :show-message="false" prop='im'>
                    <el-input v-model="form.im"></el-input>
                  </el-form-item>
                </td>
                <td>移动电话</td>
                <td >
                  <el-form-item :required="required" :show-message="false" prop='mobile'>
                    <el-input v-model="form.mobile"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>家庭电话</td>
                <td colspan="3">
                 
                  <el-form-item :required="required" :show-message="false" prop='homephone'>
                    <el-input v-model="form.homephone"></el-input>
                  </el-form-item>
                </td>
                <td>电子邮箱</td>
                <td colspan="3">
                  
                  <el-form-item :required="required" :show-message="false" prop='email'>
                    <el-input v-model="form.email"></el-input>
                  </el-form-item>
                </td>
              </tr>
            </table>
          </div>
          <div class="table_grounp">
            <h4>B、监护人信息</h4>
            <table width="100%">
              <tr>
                <td>父亲姓名</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.elderName'>
                    <el-input v-model="form.filingStudentGuardian1.elderName"></el-input>
                  </el-form-item>
                </td>
                <td>民族</td>
                <td >
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.nation'>
                    <!-- <input type="text" v-model="form.filingStudentGuardian1.nation"> -->
                    <el-select class="w160" style="width:120px;" size="mini" placeholder="请选择" v-model.trim="form.filingStudentGuardian1.nation">
                        <el-option v-for="item in nation_data" :key="item.id" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
                <td>学位</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.degree'>
                    <el-input v-model="form.filingStudentGuardian1.degree"></el-input>
                  </el-form-item>
                </td>
                <td>学历</td>
                <td>
                  
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.education'>
                    <el-input v-model="form.filingStudentGuardian1.education"></el-input>
                  </el-form-item>
                  </td>
              </tr>
              <tr>
                <td>毕业院校</td>
                <td  colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.university'>
                    <el-input v-model="form.filingStudentGuardian1.university"></el-input>
                  </el-form-item>
                  </td>
                <td>专业</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian1.professional"></td> -->
                <td  colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.professional'>
                    <el-input v-model="form.filingStudentGuardian1.professional"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>工作单位</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian1.workUnit"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.workUnit'>
                    <el-input v-model="form.filingStudentGuardian1.workUnit"></el-input>
                  </el-form-item>
                </td>
                <td>职务</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian1.position"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.position'>
                    <el-input v-model="form.filingStudentGuardian1.position"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>职业</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian1.occupation"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.occupation'>
                    <el-input v-model="form.filingStudentGuardian1.occupation"></el-input>
                  </el-form-item>
                </td>
                <td>职称</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian1.title"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.title'>
                    <el-input v-model="form.filingStudentGuardian1.title"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>电子邮箱</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian1.email"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.email'>
                    <el-input v-model="form.filingStudentGuardian1.email"></el-input>
                  </el-form-item>
                </td>
                <td>移动电话</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian1.mobile"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian1.mobile'>
                    <el-input v-model="form.filingStudentGuardian1.mobile"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>母亲姓名</td>
                <!-- <td><input type="text" v-model="form.filingStudentGuardian2.elderName"></td> -->
                <td >
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.elderName'>
                    <el-input v-model="form.filingStudentGuardian2.elderName"></el-input>
                  </el-form-item>
                </td>
                <td>民族</td>
                <!-- <td>
                  <input type="text" v-model="form.filingStudentGuardian2.nation">
                  <el-select class="w160" style="width:120px;" size="mini" placeholder="请选择" v-model.trim="form.filingStudentGuardian2.nation">
                        <el-option v-for="item in nation_data" :key="item.id" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </td> -->
                <td >
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.nation'>
                    <el-select class="w160" style="width:120px;" size="mini" placeholder="请选择" v-model.trim="form.filingStudentGuardian2.nation">
                        <el-option v-for="item in nation_data" :key="item.id" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
                <td>学位</td>
                <!-- <td><input type="text" v-model="form.filingStudentGuardian2.degree"></td> -->
                <td >
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.degree'>
                    <el-input v-model="form.filingStudentGuardian2.degree"></el-input>
                  </el-form-item>
                </td>
                <td>学历</td>
                <!-- <td><input type="text" v-model="form.filingStudentGuardian2.education"></td> -->
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.education'>
                    <el-input v-model="form.filingStudentGuardian2.education"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>毕业院校</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian2.university"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.university'>
                    <el-input v-model="form.filingStudentGuardian2.university"></el-input>
                  </el-form-item>
                </td>
                <td>专业</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian2.professional"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.professional'>
                    <el-input v-model="form.filingStudentGuardian2.professional"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>工作单位</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian2.position"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.workUnit'>
                    <el-input v-model="form.filingStudentGuardian2.workUnit"></el-input>
                  </el-form-item>
                </td>
                <td>职务</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian2.position"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.position'>
                    <el-input v-model="form.filingStudentGuardian2.position"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>职业</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian2.occupation"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.occupation'>
                    <el-input v-model="form.filingStudentGuardian2.occupation"></el-input>
                  </el-form-item>
                </td>
                <td>职称</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian2.title"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.title'>
                    <el-input v-model="form.filingStudentGuardian2.title"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>电子邮箱</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian2.title"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.email'>
                    <el-input v-model="form.filingStudentGuardian2.email"></el-input>
                  </el-form-item>
                </td>
                <td>移动电话</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentGuardian2.mobile"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentGuardian2.mobile'>
                    <el-input v-model="form.filingStudentGuardian2.mobile"></el-input>
                  </el-form-item>
                </td>
              </tr>
            </table>
          </div>
          <div class="table_grounp">
            <h4>C、学校信息</h4>
          <table width="100%">
              <tr>
                <td>学校全称</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentSchool.schoolName"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentSchool.schoolName'>
                    <el-input v-model="form.filingStudentSchool.schoolName"></el-input>
                  </el-form-item>
                </td>
                <td>校长姓名</td>
                <!-- <td><input type="text" v-model="form.filingStudentSchool.schoolmaster"></td> -->
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentSchool.schoolmaster'>
                    <el-input v-model="form.filingStudentSchool.schoolmaster"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>学校地址</td>
                <!-- <td colspan="3"><input type="text" v-model="form.filingStudentSchool.schoolAddress"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='filingStudentSchool.schoolAddress'>
                    <el-input v-model="form.filingStudentSchool.schoolAddress"></el-input>
                  </el-form-item>
                </td>
                <td>邮政编码</td>
                <!-- <td><input type="text" v-model="form.filingStudentSchool.postcode"></td> -->
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentSchool.postcode'>
                    <el-input v-model="form.filingStudentSchool.postcode"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>就读年级</td>
                <!-- <td><input type="text" v-model="form.filingStudentSchool.grade"></td> -->
                <td>
                  <!-- <el-form-item :required="required" :show-message="false" prop='filingStudentSchool.grade'>
                    <input type="text" v-model="form.filingStudentSchool.grade">
                  </el-form-item> -->
                  <el-form-item :required="required" :show-message="false" prop='filingStudentSchool.grade'>
                    <el-select v-model="form.filingStudentSchool.grade" placeholder="请选择">
                    <el-option
                      v-for="item in age"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  </el-form-item>
                  
                </td>
                <td>就读班级</td>
                <!-- <td><input type="text" v-model="form.filingStudentSchool.classes"></td> -->
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentSchool.classes'>
                    <el-input v-model="form.filingStudentSchool.classes"></el-input>
                  </el-form-item>
                </td>
                <td>入学时间</td>
                <!-- <td>
                  <el-date-picker
                    v-model="form.filingStudentSchool.enrollment"
                    type="date"
                    size="mini"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                  </td> -->
                  <td>
                    <el-form-item :required="required" :show-message="false" prop='filingStudentSchool.enrollment'>
                      <el-date-picker
                        v-model="form.filingStudentSchool.enrollment"
                        type="date"
                        size="mini"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                  </td>
              </tr>
            </table>
          </div>
          <div class="table_grounp">
            <h4>D、科技活动负责人信息</h4>
            <table width="100%">
              <tr>
                <td>姓名</td>
                <!-- <td><input type="text" v-model="form.filingStudentCharge.chargeName"></td> -->
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentCharge.chargeName'>
                    <el-input v-model="form.filingStudentCharge.chargeName"></el-input>
                  </el-form-item>
                </td>
                <td>性别</td>
                <td>
                  <!-- <input type="text" v-model="form.filingStudentCharge.sex"> -->
                  <el-form-item :required="required" :show-message="false" prop='sex'>
                    <!-- <input type="text" v-model="form.sex"> -->
                    <el-select v-model="form.filingStudentCharge.sex" placeholder="请选择">
                      <el-option
                        v-for="item in option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  
                </td>
                <td>教授学科</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentCharge.professor'>
                    <el-input v-model="form.filingStudentCharge.professor"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>办公电话</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentCharge.officePhone'>
                    <el-input v-model="form.filingStudentCharge.officePhone"></el-input>
                  </el-form-item>
                </td>
                <td>移动电话</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentCharge.mobile'>
                    <el-input v-model="form.filingStudentCharge.mobile"></el-input>
                  </el-form-item>
                </td>
                <td>电子邮箱</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentCharge.email'>
                    <el-input v-model="form.filingStudentCharge.email"></el-input>
                  </el-form-item>
                </td>
              </tr>
            </table>
          </div>
          <div class="table_grounp">
            <h4>E、班主任信息</h4>
            <table width="100%">
              <tr>
                <td>姓名</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentHeadmaster.headmasterName'>
                    <el-input v-model="form.filingStudentHeadmaster.headmasterName"></el-input>
                  </el-form-item>
                </td>
                <td>性别</td>
                <td>
                  <!-- <input type="text" v-model="form.filingStudentHeadmaster.sex"> -->
                  <el-form-item :required="required" :show-message="false" prop='sex'>
                    <el-select v-model="form.filingStudentHeadmaster.sex" placeholder="请选择">
                      <el-option
                        v-for="item in option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  
                  </td>
                <td>教授学科</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentHeadmaster.professor'>
                    <el-input v-model="form.filingStudentHeadmaster.professor"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>办公电话</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentHeadmaster.officePhone'>
                    <el-input v-model="form.filingStudentHeadmaster.officePhone"></el-input>
                  </el-form-item>
                </td>
                <td>移动电话</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentHeadmaster.mobile'>
                    <el-input v-model="form.filingStudentHeadmaster.mobile"></el-input>
                  </el-form-item>
                </td>
                <td>电子邮箱</td>
                <td>
                  <el-form-item :required="required" :show-message="false" prop='filingStudentHeadmaster.email'>
                    <el-input v-model="form.filingStudentHeadmaster.email"></el-input>
                  </el-form-item>
                </td>
              </tr>
            </table>
          </div>
          <h4 style="font-size:16px;">
            我确认上述内容属实。
          </h4>
          <div class="form">
            <div class="form_box">
              <div>
                <span>申报者签名（手写）：</span><input disabled type="text">
              </div>
              <div>
                <span>监护人签名（手写）：</span><input disabled type="text">
              </div>
              <div>
                <span>学校（签章）：</span><input disabled type="text">
              </div>
            </div>
            <div class="form_box">
              <div>
                <span>日期（手写）：</span><input disabled type="text">
                <span>年</span><input disabled type="text">
                <span>月</span><input disabled type="text">
                <span>日</span>
              </div>
              <div>
                <span>日期（手写）：</span><input disabled type="text">
                <span>年</span><input disabled type="text">
                <span>月</span><input disabled type="text">
                <span>日</span>
              </div>
              <div>
                <span>日期（手写）：</span><input disabled type="text">
                <span>年</span><input disabled type="text">
                <span>月</span><input disabled type="text">
                <span>日</span>
              </div>
            </div>
          </div>
          <div style="text-align:center; margin:20px 0;">
            <el-button @click="save" type="primary" size="mini">保存</el-button>
            <el-button @click="next" type="primary" size="mini">下一步</el-button>
            <div style="font-size:14px; margin-top:20px;">
              <small>请先保存再进行下一步操作</small>
            </div>
          </div>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">
import { authorInformation } from "@/function/formTable/formTable.js";
import { get_authorInformation } from "@/function/formTable/getFormTable.js";
import { address } from "@/utils/address";
export default {
  data() {
    return {
      required: true,
      age: [
        {
          value: "高一",
          label: "高一"
        },
        {
          value: "高二",
          label: "高二"
        },
        {
          value: "高三",
          label: "高三"
        }
      ],
      options: address,
      nation_data: [
        { id: 1, value: "汉族" },
        { id: 2, value: "壮族" },
        { id: 3, value: "满族" },
        { id: 4, value: "回族" },
        { id: 5, value: "苗族" },
        { id: 6, value: "维吾尔族" },
        { id: 7, value: "土家族" },
        { id: 8, value: "彝族" },
        { id: 9, value: "蒙古族" },
        { id: 10, value: "藏族" },
        { id: 11, value: "其他" }
      ], // 民族
      option: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        }
      ],
      form: {
        studentName: "",
        birth: "",
        sex: "",
        nation: "",
        identitycard: "",
        liveAddress: "",
        homeAddress: "",
        postcode: "",
        im: "",
        mobile: "",
        homephone: "",
        email: "",
        filingStudentGuardian1: {
          elderName: "",
          nation: "",
          degree: "",
          education: "",
          university: "",
          professional: "",
          workUnit: "",
          position: "",
          occupation: "",
          title: "",
          email: "",
          mobile: ""
        },
        filingStudentGuardian2: {
          elderName: "",
          nation: "",
          degree: "",
          education: "",
          university: "",
          professional: "",
          workUnit: "",
          position: "",
          occupation: "",
          title: "",
          email: "",
          mobile: ""
        },
        filingStudentCharge: {
          chargeName: "",
          sex: "",
          professor: "",
          officePhone: "",
          mobile: "",
          email: ""
        },
        filingStudentHeadmaster: {
          headmasterName: "",
          sex: "",
          professor: "",
          officePhone: "",
          mobile: "",
          email: ""
        },
        filingStudentSchool: {
          schoolName: "",
          schoolmaster: "",
          schoolAddress: "",
          postcode: "",
          grade: "",
          classes: "",
          enrollment: ""
        }
      }
    };
  },
  mounted() {
    get_authorInformation(this);
  },
  methods: {
    handleChange(val) {
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = this.form;
          authorInformation(data, this);
        } else {
          alert("请填写完整信息！");
          return false;
        }
      });
    },
    next() {
      this.$router.push("/index/measurement");
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
